<template>
  <el-row>
    <!-- 显示框 -->
    <el-popover
      placement="bottom-start"
      width="550"
      v-model="visible"
      :disabled="disabled !== false"
      >
      <div class="box">
        <el-collapse v-model="activeNames" @change="handleChange">
          <el-collapse-item v-for="(item,index) in icons" :title="item.title" :name="`f${index}`">
            <div>
					  <span v-if="item.list">
						 <i v-for="(child,i) in item.list" :class="['item',child?`fa fa-${child}`:'hid']" :key="i"
                @click.stop="selectClass(child)"></i>
					  </span>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
      <div slot="reference" class="reference">
			  <span v-if="chooseClass" class="icon" :style="`height:${$refs.input.$el.offsetHeight}px`">
				  <i :class="['item1 ',`fa ${chooseClass}`]"></i>
			  </span>
        <el-input ref="input" class="input" v-model="chooseClass" placeholder="请选择图标" ></el-input>
      </div>
    </el-popover>

  </el-row>
</template>

<script>
  import icons from './font_json.js'

  export default {
    // name: '图标选择',
    props: {
      value: {String, default: ''},
      disabled: {Boolean, default: false}
    },
    data() {
      return {
        visible: false,
        chooseClass: '',
        activeNames: ['f1'],
        icons
      }
    },
    computed: {
      getValue() {
        return this.value
      }
    },
    mounted() {
      console.log(this.disabled!==false)
    },
    methods: {
      selectClass(iconClass) {
        this.chooseClass = `fa-${iconClass}`
        this.$emit('input',  `fa ${this.chooseClass}`)
        this.visible = false
      },
      handleChange(val) {
      }
    }
  }
</script>

<style scoped lang="scss">
  .item {
    /*margin: 5px;*/
    border: 1px solid #9E9E9E;
    border-radius: 5px;
    padding: 5px;
    font-size: 20px;
    width: 35px;
    text-align: center;
    overflow: hidden;

    &:hover {
      border-color: #00FFFF;
      color: #1890FF;
      cursor: pointer;
      transform: scale(1.1, 1.1);
    }
  }

  .box {
    // height: 300px;
    border: #9E9E9E;
    height: 500px;
    overflow: auto;
    border-radius: 8px;

    .hid {
      display: none;
    }
  }

  .reference {
    display: flex;

    .icon {
      position: relative;
      height: 100%;
      width: 35px;
      margin: 0 15px;

      .item1 {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        font-size: 15px;
        border: 1px solid #bbbbbb;
        padding: 5px 10px;
        border-radius: 5px;
      }
    }

    .input {
      flex: 1;
    }
  }
</style>
